<template>
  <div class="function_box">
    <div class="function_container">
      <!-- 登录模块 -->
      <div class="login_box">
        <span style="font-family:'宋体">登录</span>
        <div class="login_box_blue"></div>
        <div class="login_box_orange"></div>
        <!-- 登录表单区域 -->
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginFormRules"
          label-width="0px"
          class="login_Form"
        >
          <!-- 用户名 -->
          <el-form-item prop="account">
            <el-input
              v-model="loginForm.account"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <!-- 验证码 -->
          <!-- <el-form-item prop="" width="50%">
            <el-input placeholder="验证码(例)"></el-input>
          </el-form-item> -->
          <!-- 按钮区域 -->
          <el-form-item class="btns">
            <el-button class="loginbutton" type="primary" @click="login"
              >登 录</el-button
            >
            <!-- <el-button type="info" @click="resetLoginForm">重置</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <router-view class='login_box'  name='login_box'></router-view>
      <!-- 轮播图模块 -->
      <div class="png_box">
        <img src="../../../assets/zucc_01.jpg" width="100%" height="100%" />
      </div>
      <!-- 1. 新闻公告模块 -->
      <div class="news_box" slot="header">
        <span style="font-family:'宋体">新闻公告</span>
        <div class="news_box_blue"></div>
        <div class="news_box_orange"></div>
        <div class="news_box_more"><span @click="tonews">MORE +</span></div>

        <div class="img_box">
          <el-carousel trigger="click" height="150px">
            <el-carousel-item v-for="item in carouselIMG" :key="item.src">
              <img src="../../../assets/zucc_01.jpg" />
              <img src="../../../assets/logo.png" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <router-view></router-view>
        <div class="img2_box">
          <el-table
            :data="list"
            :border="false"
            :stripe="false"
            max-height="180px"
            size="mini"
            :show-header="false"
            @row-click="opennotesDeatils"
          >
            <el-table-column
              v-if="showColumns.find((i) => i.label == '标题').show"
              label="标题"
              prop="title"
              width="300px"
            ></el-table-column>
            <el-table-column
              v-if="showColumns.find((i) => i.label == '修改时间').show"
              label="修改时间"
              prop="modifyTime"
              width="160px"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 2. 实验室介绍模块 -->
      <div class="lab_box">
        <span style="font-family:'宋体">实验室介绍</span>
        <div class="lab_box_blue"></div>
        <div class="lab_box_orange"></div>
        <div class="lab_box_more"><span @click="tolab">MORE +</span></div>
        <!-- 内容列表 -->
        <el-table
          :data="list"
          :border="false"
          :stripe="false"
          max-height="400px"
          size="max"
          :show-header="false"
          @row-click="opennewsDetails"
        >
          <el-table-column
            label="序号"
            type="index"
            width="40"
          ></el-table-column>
          <el-table-column
            v-if="showColumns.find((i) => i.label == '内容').show"
            label="内容"
            prop="content"
            width="210"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
      </div>
      <!-- 3.教学资源模块 -->
      <div class="teachingrecource_box">
        <span style="font-family:'宋体">教学资源</span>
        <div class="teachingrecource_box_blue"></div>
        <div class="teachingrecource_box_orange"></div>
        <div class="teachingrecource_box_more">
          <span @click="toTeachingresources">MORE +</span>
        </div>
        <!-- 内容列表 -->
        <el-table
          :data="list"
          :border="false"
          :stripe="false"
          max-height="400px"
          size="max"
          :show-header="false"
          @row-click="opennewsDetails"
        >
          <el-table-column
            v-if="showColumns.find((i) => i.label == '内容').show"
            label="内容"
            prop="content"
            width="370"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
      </div>
      <!-- 4.教学成果模块 -->
      <div class="teachingachievements_box">
        <span style="font-family:'宋体">教学成果</span>
        <div class="teachingachievements_box_blue"></div>
        <div class="teachingachievements_box_orange"></div>
        <div class="teachingachievements_box_more">
          <span @click="toteachingachievements">MORE +</span>
        </div>
        <!-- 内容列表 -->
        <el-table
          :data="list"
          :border="false"
          :stripe="false"
          max-height="400px"
          size="max"
          :show-header="false"
          @row-click="opennewsDetails"
        >
          <el-table-column
            v-if="showColumns.find((i) => i.label == '内容').show"
            label="内容"
            prop="content"
            width="370"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
      </div>
      <!-- 5.教育综合系统模块 -->
      <div class="EducationalAdministrationIntegratedSystem_box">
        <div class="m10">
          <img
            src="../../../assets/教务综合系统.png"
            alt=""
            width="40px"
            height="40px"
          />
        </div>
        <span style="font-family:'宋体">教务综合系统</span>
      </div>
      <!-- 6.实验室在线申请模块 -->
      <div class="LaboratoryOnlineApplication_box">
        <div class="m10">
          <img
            src="../../../assets/实验室在线申请.png"
            alt=""
            width="40px"
            height="40px"
          />
        </div>
        <span style="font-family:'宋体">实验室在线申请</span>
      </div>
      <!-- 7.成果展示模块 -->
      <div class="AchievementDisplay_box">
        <span style="font-family:'宋体">成果展示</span>
        <div class="AchievementDisplay_box_blue"></div>
        <div class="AchievementDisplay_box_orange"></div>
        <div class="AchievementDisplay_box_more"><span>MORE +</span></div>
        <!-- <el-carousel trigger="click" height="100px">
          <el-carousel-item v-for="item in carouselIMG" :key="item.src">
          </el-carousel-item>
        </el-carousel> -->
      </div>
      <!-- 8.热点新闻模块 -->
      <div class="HotNews_box">
        <span style="font-family:'宋体">热点新闻</span>
        <div class="HotNews_box_blue"></div>
        <div class="HotNews_box_orange"></div>
        <div class="HotNews_box_more"><span @click="tonews">MORE +</span></div>
        <!-- 内容列表 -->
        <el-table
          :data="list"
          :border="false"
          :stripe="false"
          max-height="400px"
          size="max"
          :show-header="false"
          @row-click="opennewsDetails"
        >
          <el-table-column
            label="序号"
            type="index"
            width="40"
          ></el-table-column>
          <el-table-column
            v-if="showColumns.find((i) => i.label == '内容').show"
            label="内容"
            prop="content"
            width="210"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
      </div>
      <!-- 9.实验室平台模块 -->
      <div class="LaboratoryPlatform_box">
        <span style="font-family:'宋体">实验室平台</span>
        <div class="LaboratoryPlatform_box_blue"></div>
        <div class="LaboratoryPlatform_box_orange"></div>
        <div class="m1">
          <img
            src="../../../assets/PAT测评系统.png"
            alt=""
            width="70px"
            height="70px"
            @click="tonews"
          />
          <span>PAT测评系统</span>
        </div>
        <div class="m2">
          <img
            src="../../../assets/教学信息综合管理.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>教学信息综合管理</span>
        </div>
        <div class="m3">
          <img
            src="../../../assets/上机查询系统.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>上机查询系统</span>
        </div>
        <div class="m4">
          <img
            src="../../../assets/资源申请.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>资源申请</span>
        </div>
        <div class="m5">
          <img
            src="../../../assets/设备管理.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>设备管理</span>
        </div>
        <div class="m6">
          <img
            src="../../../assets/AOA评测系统.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>AOA评测系统</span>
        </div>
        <div class="m7">
          <img
            src="../../../assets/SQL判题系统.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>SQL判题系统</span>
        </div>
        <div class="m8">
          <img
            src="../../../assets/格式检查系统.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>格式检查系统</span>
        </div>
        <div class="m9">
          <img
            src="../../../assets/网络U盘.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>网络U盘</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      carouselIMG: [
        require("../../../assets/zucc_01.jpg"),
        require("../../../assets/logo.png"),
      ],
      //登录
      loginForm: {
        account: "31801100",
        password: "123456",
      },
      loginFormRules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 50,
            message: "长度在 6 到 50 个字符hhhhhhh",
            trigger: "blur",
          },
        ],
      },
      query: {
        title: "",
        pageNum: 1,
        pageSize: 7,
      },
      // 内容列表
      list: [],
      // 内容总条数
      total: 0,
      // 初始化显示字段
      showColumns: [
        { label: "标题", show: true },
        { label: "内容", show: true },
        { label: "修改时间", show: true },
      ],
      // 是否显示详情
      showDetailVisible: false,
      // 数据详情
      detail: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    resetLoginForm() {
      // console.log(this);
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        // console.log(valid);
        if (!valid) return;
        const { data: res } = await this.$http.post("/v1/api/users/login", {
          account: this.loginForm.account,
          password: md5(this.loginForm.password),
        });
        if (res.msg != "success") return this.$message.error("登录失败");
        // if(res.status != 200) return console.log('登录失败');
        // console.log('登录成功');
        localStorage.setItem("userInfo", JSON.stringify(res.data));
        this.$message.success("登录成功");
        // console.log(res);
        window.sessionStorage.setItem("token", res.data.id);
        this.$router.push({
          name: "Home",
          params: {
            // 后期修改为roleType
            roleType: res.data.roleType,
          },
        });
      });
    },

    tohosthome() {
      this.$router.push("/homepage");
    },
    tonews() {
      this.$router.push("/homenews");
    },
    tolab() {
      this.$router.push("/laboratoryintroduction");
    },
    toresources() {
      this.$router.push("/tocoursewareresources");
    },
    toTeachingresources() {
      this.$router.push("/coursewareresources");
    },
    toteachingachievements() {
      this.$router.push("/teachingachievements");
    },
    opennewsDetails(row) {
      // this.$router.push("/Homenews_detail",row);
      // this.$router.push({ path: '/Homenews_detail', query: { userId: 123 }});
      this.$router.push({ name: "newsdetail", params: { row: row } });
    },
    opennotesDeatils(row) {
      this.$router.push({ name: "notesdetail", params: { row: row } });
    },

    // 获取内容列表
    getList() {
      this.$http.post("/v1/api/newses/page", this.query).then((res) => {
        if (res.data.code == 0) {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 监听 pageSize 改变的事件
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.getList();
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.query.pageNum = page;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
//less 支持less语法格式
//scoped当前组件内生效，去掉全局生效

// 主体功能
.function_box {
  width: 1020px;
  // height: 1750px;
  height: 1700px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 1003px;
  transform: translate(-50%, -50%);
}
//主体区域背景布局颜色
.function_container {
  // background-color: #c0e7f3;
  // background-color: rgb(255, 255, 255);
  height: 100%;
}
// 轮播图模块
.png_box {
  width: 100%;
  height: 380px;
  //预留色
  // background-color: #38ce77;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 190px;
  transform: translate(-50%, -50%);
}

// 登录模块
.login_box {
  width: 250px;
  height: 270px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 525px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.login_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.login_box_blue {
  width: 230px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 125px;
  top: 46px;
  transform: translate(-50%, -50%);
}

.login_Form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 10px;
  left: 0px;
  top: 70px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}

.loginbutton {
  width: 230px;
}

// 新闻公告模块
.news_box {
  width: 750px;
  height: 270px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 645px;
  top: 525px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.news_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.news_box_blue {
  width: 725px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 373px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.news_box_more {
  width: 60px;
  height: 15px;
  background-color: #106ab5;
  position: absolute;
  left: 706px;
  top: 39px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    // padding-top: 15px;
    padding-left: 5px;
    color: #fff;
    font-size: 1px;
  }
}
.img_box {
  width: 250px;
  height: 150px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 145px;
  transform: translate(-50%, -50%);
}
.img2_box {
  width: 460px;
  height: 180px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 510px;
  top: 140px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  /deep/.el-table::before {
    //去除底部白线
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }
  /deep/ .el-table td,
  /deep/ .el-table th.is-leaf {
    border-bottom: none;
  }

  /deep/ .el-table::before {
    height: 0;
  }
}
// 实验室介绍模块
.lab_box {
  width: 250px;
  height: 440px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 890px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.lab_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.lab_box_blue {
  width: 230px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 125px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.lab_box_more {
  width: 60px;
  height: 15px;
  background-color: #106ab5;
  position: absolute;
  left: 210px;
  top: 39px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    // padding-top: 15px;
    padding-left: 5px;
    color: #fff;
    font-size: 1px;
  }
}
// 教学资源模块
.teachingrecource_box {
  width: 370px;
  height: 490px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 455px;
  top: 915px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.teachingrecource_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.teachingrecource_box_blue {
  width: 340px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 190px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.teachingrecource_box_more {
  width: 60px;
  height: 15px;
  background-color: #106ab5;
  position: absolute;
  left: 330px;
  top: 39px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    // padding-top: 15px;
    padding-left: 5px;
    color: #fff;
    font-size: 1px;
  }
}
//教学成果模块
.teachingachievements_box {
  width: 370px;
  height: 490px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 835px;
  top: 915px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.teachingachievements_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.teachingachievements_box_blue {
  width: 340px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 190px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.teachingachievements_box_more {
  width: 60px;
  height: 15px;
  background-color: #106ab5;
  position: absolute;
  left: 330px;
  top: 39px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    // padding-top: 15px;
    padding-left: 5px;
    color: #fff;
    font-size: 1px;
  }
}
//教务综合系统模块
.EducationalAdministrationIntegratedSystem_box {
  width: 250px;
  height: 40px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 1140px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    padding-top: 10px;
    padding-left: 70px;
    font-size: 15px;
    color: #106ab5;
  }
}
.m10 {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 40px;
  top: 20px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
  }
}
//实验室在线申请模块
.LaboratoryOnlineApplication_box {
  width: 250px;
  height: 40px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 1190px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    padding-top: 10px;
    padding-left: 70px;
    font-size: 15px;
    color: #106ab5;
  }
}
//成果展示模块
.AchievementDisplay_box {
  width: 750px;
  height: 190px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 645px;
  top: 1265px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 12px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.AchievementDisplay_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.AchievementDisplay_box_blue {
  width: 725px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 373px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.AchievementDisplay_box_more {
  width: 60px;
  height: 15px;
  background-color: #106ab5;
  position: absolute;
  left: 706px;
  top: 39px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    // padding-top: 15px;
    padding-left: 5px;
    color: #fff;
    font-size: 1px;
  }
}
//热点新闻模块
.HotNews_box {
  width: 250px;
  height: 420px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 1430px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.HotNews_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.HotNews_box_blue {
  width: 230px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 125px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.HotNews_box_more {
  width: 60px;
  height: 15px;
  background-color: #106ab5;
  position: absolute;
  left: 210px;
  top: 39px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    // padding-top: 15px;
    padding-left: 5px;
    color: #fff;
    font-size: 1px;
  }
}
//实验室平台模块
.LaboratoryPlatform_box {
  width: 750px;
  height: 270px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 645px;
  top: 1505px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
  > img {
    width: 70px;
    height: 70px;
  }
}
.LaboratoryPlatform_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.LaboratoryPlatform_box_blue {
  width: 725px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 373px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.m9 {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 60px;
  top: 100px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: 20px;
    color: #000;
    font-size: 5px;
  }
}
.m1 {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 160px;
  top: 100px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: 10px;
    color: #000;
    font-size: 5px;
  }
}
.m2 {
  width: 100px;
  height: 90px;
  position: absolute;
  left: 280px;
  top: 100px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: px;
    color: #000;
    font-size: 5px;
  }
}
.m3 {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 390px;
  top: 100px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 5px;
  }
  > span {
    display: flex;
    padding-left: 10px;
    color: #000;
    font-size: 5px;
  }
}
.m4 {
  width: 100px;
  height: 90px;
  position: absolute;
  left: 490px;
  top: 100px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: 20px;
    color: #000;
    font-size: 5px;
  }
}
.m5 {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 590px;
  top: 100px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 6px;
  }
  > span {
    display: flex;
    padding-left: 18px;
    color: #000;
    font-size: 5px;
  }
}
.m6 {
  width: 100px;
  height: 90px;
  position: absolute;
  left: 690px;
  top: 100px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: 10px;
    color: #000;
    font-size: 5px;
  }
}
.m7 {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 60px;
  top: 205px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: 10px;
    color: #000;
    font-size: 5px;
  }
}
.m8 {
  width: 100px;
  height: 90px;
  position: absolute;
  left: 165px;
  top: 205px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: 10px;
    color: #000;
    font-size: 5px;
  }
}
/*最外层透明*/
/deep/.el-table,
.el-table__expanded-cell {
  background-color: #f9f9f9;
}
/* 表格内背景颜色 */
/deep/.el-table th,
/deep/.el-table tr,
/deep/.el-table td {
  background-color: #f9f9f9;
}
</style>
